<template>
  <div id="app">
    <router-view />
    <!-- 获取即将到时的预约列表 -->
    <el-dialog title="即将到时的提醒列表" :visible.sync="dialogTableVisible" width="800px">
      <el-table
        :data="getRemainsData"
        ref="multipleTable"
      >
        <!-- @selection-change="handleSelectionChange" -->
        <!-- type="selection" -->
        <el-table-column  width="55"></el-table-column>
        <el-table-column prop="customerName" align="center" label="客户姓名"></el-table-column>
        <el-table-column prop="companyName" align="center" label="客户公司"></el-table-column>
        <el-table-column label="提醒时间" align="center" min-width="200">
          <template slot-scope="scope">{{ scope.row.remainTime}}</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0" style="color:#e66d06;">未提醒</span>
            <span v-if="scope.row.status==1" style="color:green;">已提醒</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="warning" @click="goCou(scope.row)">去跟进</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="quxiao" size="small">取消</el-button> -->
        <el-button @click="dialogTableVisible = false" type="primary" size="small">我知道了</el-button>
      </span>
    </el-dialog>
    <el-dialog title="公告" :visible.sync="dialogTableVisible2" width="700px">
      <div class="center6">
        <div class="top">{{getRemainsData2.noticeTitle}}</div>
        <div class="ccc">{{getRemainsData2.noticeContent}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao2" size="small">取消</el-button>
        <el-button @click="knower2" type="primary" size="small">不再提醒</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { knower2,know6,reserve,edreserve } from "../src/api/index";
export default {
  name: "App",
  data() {
    return {
      //获取即将到时的预约列表
      getRemainsData: [],
      getRemainsData2: {},
      dialogTableVisible: false,
      dialogTableVisible2: false,
      //30分钟退出登录
      timeOut: "",
      ids6: [],
      delList: []
    };
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      console.log(from.path);
      if (from.path == "/login" && to.path == "/index") {
        // this.initWebSocket();
        this.reserve()
      }
    },
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    quxiao() {
      this.dialogTableVisible = false;
    },
    quxiao2() {
      this.dialogTableVisible2 = false;
    },
    knower() {
      const length = this.ids6.length;
      let str = "";
      this.delList = this.delList.concat(this.ids6);
      for (let i = 0; i < length; i++) {
        str += this.ids6[i].id + ",";
      }
      if (str.length == 0) {
        this.$message.error("必须选择一项！");
        return;
      }
      this.know6(str);
    },
    // 跳转客户
    goCou(row) {
      this.$store.state.notice.couName = row.companyName
      this.$store.state.notice.ifNotice = true
      this.$router.push('/customer1')
    },
    // 预约列表
    reserve() {
      reserve().then((res) => {
        if (res.code == "200") {
          if(res.total != 0){
            this.getRemainsData = res.rows
            this.dialogTableVisible = true
          }
        } else {
          this.$message.error("操作失败,请稍后重试");
        }
      })
    },
    // 修改状态
    ed() {
      edreserve().then((res) => {
        if(res.code == '200') {
          this.dialogTableVisible = false
          this.$message.success("操作成功");
        }else {
          this.$message.error("操作失败");
        }
      })
    },
    knower2() {
      knower2(this.getRemainsData2.noticeId).then((res) => {
        if (res.code == "200") {
          console.log(res);
          this.$message.success("操作成功");
          this.dialogTableVisible2 = false;
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 不在提醒封装
    know6(id) {
      console.log(id, this.ids6);
      know6(id)
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.$message.success("操作成功");
            this.dialogTableVisible = false;
            this.ids6 = [];
          } else {
            this.$message.error("操作失败");
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.ids6 = val;
    },
    initWebSocket() {
      //初始化weosocket
      // const wsuri ="ws://192.168.1.4:8083/prod-api/imserver/" + localStorage.getItem("useId");
      const wsuri ="ws://172.17.77.2:8085/prod-api/imserver/" + localStorage.getItem("useId");
      console.log(wsuri,'wsuri');
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: "12345" };
      // this.websocketsend();
      console.log("建立ws连接成功");
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      console.log(redata, "接收数据");
      if (redata.data == "连接成功") {
        console.log("连接成功暂无数据");
      } else {
        if (redata.type == 1) {
          this.getRemainsData = redata.data;
          this.dialogTableVisible = true;
        } else if (redata.type == 2) {
          this.getRemainsData2 = redata.data;
          this.dialogTableVisible2 = true;
        }
      }
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    getData() {
      this.$axios
        .get("/manage/getMenuByRoleId")
        .then((res) => {
          if (res.code == "1008") {
            this.$message.error(`${res.message}`);
            localStorage.clear();
            clearCookie();
            this.$cookies.remove("bixsyscookie");
            this.$router.replace("/login");
          }else{
            localStorage.setItem(
              "getMenuByRoleId",
              JSON.stringify(res.data.resourceTypeDtoList)
            );
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    getRemains() {
      this.$axios.get("/remain/getRemains").then((res) => {
        this.getRemainsData = res.data;
        if (this.getRemainsData == null || this.getRemainsData == "") {
          this.dialogTableVisible = false;
        } else {
          this.dialogTableVisible = true;
        }
      });
    },
  },
};
</script>
<style>
body .el-table th.gutter{
  display: table-cell!important;
}
.el-cascader-menu {
    max-height: 300px;
}
</style>
